import * as React from 'react';
import Box from '@/commonComponents/box/index';
import { Button, Space, Swiper, Toast } from 'antd-mobile';
import swipePng from './banner.png';
import './index.module.scss';
const { memo } = React;

const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];

const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      styleName="swipe-item-box"
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
      }}
    >
      <img src={swipePng} alt=""></img>
    </div>
  </Swiper.Item>
));

interface SwipeProps {
  data?: number[];
  isLoading?: boolean;
}

function Swipe(props: SwipeProps) {
  // const { data } = props;
  return (
    <Box data={[1]} isLoading={false} styleName="swipe-box">
      <Swiper autoplay loop>
        {items}
      </Swiper>
    </Box>
  );
}

export default memo(Swipe);
